<template>
  <!-- 登录页面 -->
  <div id="my-aside">

    <el-row @click.native="toggleCollapse" class="toggle-collapse">
      <el-col :span="24" v-if="isCollapse" style="font-size: 14px;">
        <i class="el-icon-s-unfold"></i>展开
      </el-col>
      <el-col :span="24" v-else style="font-size: 14px;">
        <i class="el-icon-s-fold"></i>收起
      </el-col>
    </el-row>

    <el-menu default-active=" 1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
      background-color="#373d41" text-color="#fff" active-text-color="#00aaff" unique-opened :router="true"
      :collapse="isCollapse" :collapse-transition="false">

      <!-- 数据统计 -->
      <el-submenu index="dashboard">
        <template slot="title">
          <i class="el-icon-s-data"></i>
          <span>数据统计</span>
        </template>
        <el-menu-item index="statistics">
          <i class="el-icon-s-data"></i>
          <span>统计分析</span>
        </el-menu-item>
        <el-menu-item index="calendar">
          <i class="el-icon-date"></i>
          <span>日历</span>
        </el-menu-item>
      </el-submenu>

      <!-- 用户管理 -->
      <el-submenu index="user">
        <template slot="title">
          <i class="el-icon-user-solid"></i>
          <span>用户管理</span>
        </template>
        <el-menu-item index="sysUser">
          <i class="el-icon-user-solid"></i>
          <span>系统用户</span>
        </el-menu-item>
        <el-menu-item index="black">
          <i class="el-icon-s-cooperation"></i>
          <span>黑名单</span>
        </el-menu-item>
      </el-submenu>

      <!-- 文章管理 -->
      <el-submenu index="article">
        <template slot="title">
          <i class="el-icon-document"></i>
          <span>文章管理</span>
        </template>
        <el-menu-item index="article">
          <i class="el-icon-folder"></i>
          <span>文章列表</span>
        </el-menu-item>
        <el-menu-item index="articleCategory">
          <i class="el-icon-c-scale-to-original"></i>
          <span>文章分类</span>
        </el-menu-item>
        <el-menu-item index="tag">
          <i class="el-icon-s-flag"></i>
          <span>文章标签</span>
        </el-menu-item>
      </el-submenu>

      <!-- 任务调度 -->
      <el-submenu index="job">
        <template slot="title">
          <i class="el-icon-discount"></i>
          <span>任务调度</span>
        </template>
        <el-menu-item index="job">
          <i class="el-icon-discount"></i>
          <span>任务调度日志</span>
        </el-menu-item>
      </el-submenu>

      <!-- 系统管理 -->
      <el-submenu index="system">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>系统管理</span>
        </template>
        <el-menu-item index="notice">
          <i class="el-icon-message-solid"></i>
          <span>系统公告</span>
        </el-menu-item>
        <el-menu-item index="log">
          <i class="el-icon-folder-opened"></i>
          <span>系统访问日志</span>
        </el-menu-item>
        <el-menu-item index="link">
          <i class="el-icon-link"></i>
          <span>友情链接</span>
        </el-menu-item>

      </el-submenu>
    </el-menu>
  </div>
</template>
<script>

export default {
    name: 'my-aside',
    data () {
        return {
            isCollapse: false
        }
    },
    methods: {
        toggleCollapse () {
            this.isCollapse = !this.isCollapse
            this.$emit('childFn', this.isCollapse) // 通过childFn 将值传递给父页面
        },
        handleOpen (key, keyPath) {
            console.log(key, keyPath)
        },
        handleClose (key, keyPath) {
            console.log(key, keyPath)
        }
    }
    // mounted() {}
}
</script>

<style scoped>
  #my-aside {
    width: 100%;
    height: 100%;
    background-color: #373d41;
  }

  /* 去掉彩带右侧的多出的边框 */
  .el-menu {
    border: none;
  }

  /* router-link去掉下划线 */
  a {
    /* color: #fff; */
    text-decoration: none;
  }

  .router-link-active {
    text-decoration: none;
  }

  .toggle-collapse {
    text-align: center;
    background-color: #004c73;
    height: 32px;
    line-height: 32px;
    color: #fff;
  }
</style>
